import React, { useRef, useState } from 'react';
import { ModalForm } from '@ant-design/pro-components';
import { Checkbox } from 'antd';
import type { ProFormInstance } from '@ant-design/pro-components';
import type { CheckboxValueType } from 'antd/es/checkbox/Group';

export type UpdatePageProps = {
  tabArr?: CLOUMS.CLOUMSListItem[];
  selectTab?: CLOUMS.CLOUMSListItem[];
  setSelectTab?: any;
  renderTable: any;
  pageShow: boolean;
  pageShowFn: any;
};

const EditorPage: React.FC<UpdatePageProps> = (props) => {
  const editorRef = useRef<ProFormInstance>();

  const tabArr = props.tabArr;
  const selectTab = props.selectTab;

  const options: any = [];
  const selectTabOptions: any = [];
  const selectValue: any = []; // key 值

  tabArr?.forEach((el) => {
    options.push({ label: el.name, value: el.code });
  });
  selectTab?.forEach((el) => {
    selectTabOptions.push({ label: el.name, value: el.code });
    selectValue.push(el.code);
  });

  const [tableData, setTableData] = useState<any[]>(selectValue);

  const onChange = (checkedValues: CheckboxValueType[]) => {
    setTableData(checkedValues);
  };
  return (
    <ModalForm
      formRef={editorRef}
      title="设置表头"
      width="500px"
      visible={props.pageShow}
      onVisibleChange={props.pageShowFn}
      onFinish={() => props.renderTable(tableData)}
    >
      <Checkbox.Group options={options} defaultValue={selectTabOptions} onChange={onChange} />
    </ModalForm>
  );
};

export default EditorPage;
